<template>
    <div class="app-container">
        <div class="basicInfo">
            <el-tabs v-model="basicinfo">
                <el-tab-pane label="基本信息" name="first">
                    <table class="detailtable">
                        <tr>
                            <td width="10%">企业名称</td>
                            <td width="15%">{{licenseData.companyName}}</td>
                            <td width="10%">统一社会信用代码</td>
                            <td width="15%">{{licenseData.shtyxydm}}</td>
                        </tr>
                    </table>
                </el-tab-pane>
            </el-tabs>
            <el-tabs v-model="basicinfo">
                <el-tab-pane label="上传材料" name="first">
                    <!-- <el-image :src="imgList[0]" alt="上传材料" fit='cover' class="img" :preview-src-list="imgList"></el-image> -->
                    <el-image v-for="item in imgList" :key="item"
                                      style="width: 200px; height: 200px" :src="item" :preview-src-list="imgList"></el-image>
                </el-tab-pane>
            </el-tabs>
            <!-- <p class="title">上传材料</p> -->
            
            <div class="button">
                <el-button type="primary" @click="goBack">返回上页</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import {searchAuthByShtyxydm} from '@/api/portay'
import mixin from '@/views/roles/admin/work/mixin'
export default {
    mixins: [mixin],
    data() {
        return {
            shtyxydm:undefined,
            backPage:undefined,
            licenseData:{},
            imgList:[],
            basicinfo:'first'
        }
    },
    created() {
        this.shtyxydm = this.$route.query.shtyxydm;
        this.backPage = this.$route.query.page;
        this.onload();
    },
    mounted(){
        
    },
    methods: {
        onload(){
            let params = {
                shtyxydm:this.shtyxydm
            }
            this.imgList = []
            searchAuthByShtyxydm(params).then(res=>{
                this.licenseData = res.data;
                res.data.fileList.map(item=>{
                    return this.run(item.base64Code)
                })
            })
        },
        // 添加水印1
        async run(imgUrl) {
            // 1.图片路径转成canvas
            const tempCanvas = await this.imgToCanvas(imgUrl);
            // 2.canvas添加水印
            const markText = '我是水印'
            const canvas = this.addWatermark(tempCanvas, markText);
            // 3.canvas转成img
            const img = this.convasToImg(canvas);
            // 查看效果
            this.imgList.push(img.src);
        },
        //返回上一页
        goBack(){
            let shtyxydm = this.shtyxydm;
            let path = '/portray1/'+this.backPage;
            this.$router.push({ path: path,query:{shtyxydm:shtyxydm}}); 
        }
    }
}
</script>

<style scoped="scoped" lang="scss">
.app-container{
    padding: 24px;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: #f0f0f0;
    height: calc(100vh - 50px);
}
.basicInfo{
    width: 50%;
    padding: 12px;
    background: #ffffff;
    .button{
        margin-top: 20px;
        width: 100%;
        text-align: center;
    }
    .img{
        width: 100%;
    }
    .table{
            width: 100%;
            height: 340px;
            border-collapse: collapse;
            th,td{
                width: 238px;
                height: 56px;
                border: #ccc solid 1px;
                
            }
            th{
                background-color: #f2f9fe;
            }
            td{
                padding-left: 10px;
                text-align: left;
            }
        }
}
.title{
    font-size: 18px;
    font-weight: 900;
}
.detailtable{width: 100%; border-collapse: collapse; border-spacing: 0; border:#e5e5e5 solid 1px;}
.detailtable tr{width: 100%;}
.detailtable td{ padding: 8px 10px; text-align: left; line-height: 24px; font-size: 14px; color:#434343;  border:#e5e5e5 solid 1px;}
.detailtable td{font-weight: normal; background-color:#fff}
.detailtable td{word-break:break-all;}
/deep/ .row{display: flex;justify-content: space-between;}
</style>